import React, { Component } from "react"
import { InputItem, Modal, List, Picker, Toast } from "antd-mobile";

import Upload from '@/components/Upload'
import FormMiddleware from '@/components/EditModal'
import { debounce } from '@/utils'
import _http from "@/_http";

const Item = List.Item

@FormMiddleware()
class EditModalContainer extends Component {
  state = {
    formData: {
      name: '',
      price: '',
      catid: '',
      img: '',
    },
    timer: null
  }

  componentDidMount(){
    const { editId, rowData, form } = this.props
    console.log(editId, rowData, 'editId, rowData');
    if (editId) {
      this.setState({
        formData: rowData
      })
    }
  }
  
  // componentWillReceiveProps
  shouldComponentUpdate(res, res2){
    console.log(res, 'res');
    console.log(res2, 'res2');
    // this.setState({
      
    // })

    return true

  }

  onClose() {
    console.log('onclose');
  }

  onInputChange(e, key) {
    console.log('okok');
    this.setState({
      formData: {
        ...this.state.formData,
        [key]: e
      }
    })

    // console.log(this.state, 'this.state');
  }

  render() {
    const { formData } = this.state
    const { editId, cates, onOk, store } = this.props
    const { getFieldProps, getFieldError, validateFields } = this.props.form
    let errors

    return <div className="z-editModal">
      <Modal
        visible={true}
        transparent
        maskClosable={false}
        onClose={() => this.onClose()}
        title={editId ? '修改食物信息' : '添加食物'}
        footer={[
          {
            text: '取消',
            onPress:  (e) => {
              console.log('cancel');
              onOk()
            }
          },
          {
            text: editId ? "修改信息" : '添加食物',
            onPress: async (e) => {
              const res = editId ? await _http('/food/edit', {
                ...formData,
                id: editId,
              }, 'post') : await _http('/food/add', {
                ...formData,
                store
              }, 'post')
              if (res.data.code === 1) {
                Toast.success('操作成功！可以继续操作', 1);
              }else{
                Toast.fail(res.data.msg, 1);
              }
              if(editId) onOk() 
            },
          }
        ]}
      >
        <List>
          <InputItem placeholder="请输入食物名" onInput={(e) => this.onInputChange(e.target.value, 'name')} value={formData.name}>食物名</InputItem>
          <InputItem placeholder="请输入价格" onInput={(e) => this.onInputChange(e.target.value, 'price')} value={formData.price}>价格</InputItem>
          <Picker data={cates} cols={1} className="forss" onChange={(e) => this.onInputChange(e[0], 'catid')} value={[formData.catid]}>
            <Item arrow="horizontal">分类</Item>
          </Picker>
          <Item>
            <div className="f-label">图片</div>
            {formData.img ? <img src={formData.img} alt={formData.name}/> : null}
            <Upload multiple={false} imageChange={(url) => this.onInputChange(url, 'img')} />
          </Item>
          <div>
            {(errors = getFieldError('required')) ? errors.join(',') : null}
          </div>
        </List>
      </Modal>
      <style>{`
      .z-editModal .am-list-item img {
        width: 70px;
        height: auto;
        vertical-align: middle;
      }
      .am-list-item img {
        width: 80px;
        height: 80px;
        vertical-align: middle;
        margin-top: 10px;
    }
      `}</style>
    </div>
  }
}

export default EditModalContainer